// 选择器嵌套
// 【ul li a】【a :hover】【a:hover】
.nav {
    width: 100px;
    .test div {
        height: 10px;
    }
    ul {
        height: 40px;
        li {
            float: left;
            color: red;
            &:hover {
                background-color: blue;
            }
            :link {
                background-color: white;
            }
            ::before {
                background-color: black;
            }
        }
    }
}

// 【li>a】【li+a】【li~a】
li > {
    a {
        background-color: #fff;
    }
}
li {
    >a {
        background-color: #fff;
    }
}

// 属性嵌套
// background-xxx、font-xxx
div {
    background: blue {
        color: red;
        image: './test.png';
        repeat: no-repeat;
    };
}

// 【&】代表父选择器
ul {
    & li {
        background: #000;
    }
    &:hover {
        background: #000;
    }
    & &-test {
        background: #000;
    }
}